import {
  tableActiveKey,
  operateType,
  drawerFormState,
  drawer_disable_ok_button,
} from "./store";
import PopularComponent from "./components/PopularComponent";
import VipComponent from "./components/VipComponent";
import ScoreComponent from "./components/ScoreComponent";
import { handleSubmit } from "./utils";
import { tmp_proxy } from ".";
export const drawerInstance = ref<any>(null);
export const drawerTitle = ref("");
export const drawerLoading = ref(false);
export const drawerVisible = ref(false);
export const drawerConfig = () => {
  const defineDrawer = {
    width: "800px",
    drawerInstance,
    loading: drawerLoading,
    visible: drawerVisible,
    title: drawerTitle,
    maskClosable: true,
    formState: drawerFormState,
    disable_ok_button: drawer_disable_ok_button,
    slot: {
      extra: () => {
        const { loading, disable_ok_button } = defineDrawer;
        return (
          <>
            <a-space size={8}>
              {operateType.value != "view" ? (
                <s-button
                  icon={renderIcon("icon-cancel")}
                  onClick={() =>
                    tmp_proxy.$confirm({
                      closable: true,
                      maskClosable: true,
                      icon: null,
                      title: () => <>{$t("base.prompt")}</>,
                      style: {
                        top: "30%",
                      },
                      content: <>{$t("base.cancelTips")}</>,
                      onOk: () => (drawerVisible.value = false),
                    })
                  }
                >
                  {$t("base.cancel")}
                </s-button>
              ) : null}

              <s-button
                icon={renderIcon("icon-tubiao_tijiao")}
                loading={loading.value}
                disabled={disable_ok_button?.value ?? disable_ok_button}
                type="primary"
                onClick={async () => handleSubmit()}
              >
                {operateType.value === "view" ? $t("base.ok") : $t("base.save")}
              </s-button>
            </a-space>
          </>
        );
      },
      extra_form_item: () => {
        const { formState } = defineDrawer;
        return (
          <>
            {tableActiveKey.value === 0 ? (
              <VipComponent />
            ) : tableActiveKey.value === 1 ? (
              <PopularComponent />
            ) : tableActiveKey.value === 2 ? (
              <ScoreComponent />
            ) : null}
          </>
        );
      },
    },
  };

  return defineDrawer;
};
